<template>
  <div class="advice-container">
    <!-- 问题详情 -->
    <div class="question-section card">
      <div class="question-header">
        <h1>{{ question.title }}</h1>
        <div class="question-meta">
          <span class="category">{{ getCategoryName(question.categoryId) }}</span>
          <span class="publish-time">{{ formatDate(question.publishTime) }}</span>
        </div>
      </div>
      <p class="question-content">{{ question.content }}</p>
      <div class="question-stats">
        <span class="view-count">{{ question.viewCount }} 次浏览</span>
        <span class="advice-count">{{ question.adviceCount }} 条建议</span>
      </div>
    </div>

    <!-- 专家建议 -->
    <div class="advice-section">
      <h2>专业建议</h2>
      <div class="advice-list">
        <router-link 
          v-for="advice in adviceList" 
          :key="advice.id" 
          :to="`/advice-detail/${advice.id}`" 
          class="advice-link"
        >
          <div class="advice-card card">
            <div class="advisor-info">
              <div class="avatar">{{ advice.advisor.name.charAt(0) }}</div>
              <div class="advisor-details">
                <h3>{{ advice.advisor.name }}</h3>
                <p class="advisor-title">{{ advice.advisor.title }}</p>
              </div>
              <div class="advice-rating">
                <span class="rating">{{ advice.rating }}分</span>
              </div>
            </div>
            <div class="advice-content">
              <p>{{ advice.content }}</p>
            </div>
            <div class="advice-actions">
              <button class="btn btn-secondary">点赞 ({{ advice.likes }})</button>
              <button class="btn btn-secondary">收藏</button>
              <button class="btn btn-secondary">分享</button>
            </div>
            <span class="view-details">查看详情 →</span>
          </div>
        </router-link>
      </div>
    </div>

    <!-- 相关问题 -->
    <div class="related-section">
      <h2>相关问题</h2>
      <div class="related-questions">
        <div 
          v-for="related in relatedQuestions" 
          :key="related.id" 
          class="related-card card"
        >
          <router-link :to="`/advice/${related.id}`" class="related-link">
            <h3>{{ related.title }}</h3>
            <p>{{ related.summary }}</p>
            <div class="related-meta">
              <span>{{ related.adviceCount }} 条建议</span>
              <span>{{ related.viewCount }} 次浏览</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdviceView',
  data() {
    return {
      question: {
        id: 1,
        title: '如何处理分手后的痛苦？',
        content: '我和男朋友分手已经一个月了，但还是无法走出痛苦，每天都在回忆过去的美好时光。我知道应该向前看，但情绪总是反复，有时候会突然很沮丧，有时候又觉得可以释怀。我尝试过和朋友倾诉，也试过让自己忙碌起来，但效果都不持久。我该如何真正走出这段阴霾？',
        categoryId: 2,
        adviceCount: 12,
        viewCount: 543,
        publishTime: '2024-01-15'
      },
      categories: [
        { id: 0, name: '全部' },
        { id: 1, name: '恋爱问题' },
        { id: 2, name: '分手问题' },
        { id: 3, name: '婚姻问题' },
        { id: 4, name: '暗恋问题' },
        { id: 5, name: '友情问题' }
      ],
      adviceList: [
        {
          id: 1,
          content: '分手后的痛苦是正常的情绪反应，不要急于摆脱这种感受。给自己一些时间去体验和处理这些情绪。建议你可以尝试写日记，记录每天的感受，这有助于你更好地理解自己的情绪变化。同时，建立新的日常习惯，比如运动、阅读或学习新技能，这些都能帮助你重新找到生活的重心。',
          advisor: {
            name: '李心理咨询师',
            title: '资深情感咨询师'
          },
          rating: 4.8,
          likes: 24
        },
        {
          id: 2,
          content: '从你的描述来看，你已经意识到需要走出阴霾，这是很好的开始。我建议你可以尝试以下方法：1. 制定一个短期目标清单，每天完成一个小目标；2. 减少触发回忆的环境因素，比如暂时收起情侣物品；3. 寻求专业心理咨询师的帮助，他们能提供更个性化的指导。记住，治愈需要时间，不要给自己太大压力。',
          advisor: {
            name: '王情感专家',
            title: '婚姻与家庭治疗师'
          },
          rating: 4.6,
          likes: 18
        },
        {
          id: 3,
          content: '分手后的反复情绪是完全正常的，这说明你是一个有感情的人。我建议你可以尝试正念冥想，这能帮助你更好地观察和接纳自己的情绪，而不是被情绪牵着走。同时，多参与社交活动，与支持你的朋友和家人保持联系。如果情况持续恶化，建议寻求专业帮助。你并不孤单。',
          advisor: {
            name: '张心理医生',
            title: '临床心理学博士'
          },
          rating: 4.9,
          likes: 31
        }
      ],
      relatedQuestions: [
        {
          id: 8,
          title: '被分手后如何重新开始？',
          summary: '被前女友劈腿分手后，我对感情失去了信心，不知道该如何重新开始新的恋情...',
          adviceCount: 17,
          viewCount: 756
        },
        {
          id: 13,
          title: '忘不掉前任怎么办？',
          summary: '分手已经半年了，但我还是经常想起前任，无法全身心投入到新的感情中...',
          adviceCount: 19,
          viewCount: 845
        },
        {
          id: 2,
          title: '恋爱中如何保持个人空间？',
          summary: '我和女友恋爱半年了，她总是希望时刻和我在一起，我感到有些窒息，该如何平衡？',
          adviceCount: 8,
          viewCount: 321
        }
      ]
    }
  },
  methods: {
    getCategoryName(categoryId) {
      const category = this.categories.find(cat => cat.id === categoryId)
      return category ? category.name : '未分类'
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      const now = new Date()
      const diff = now - date
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      
      if (days === 0) {
        return '今天'
      } else if (days === 1) {
        return '昨天'
      } else if (days < 7) {
        return `${days} 天前`
      } else {
        return date.toLocaleDateString('zh-CN')
      }
    }
  }
}
</script>

<style scoped>
.advice-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.question-section {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.question-header h1 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1rem;
}

.question-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.category {
  background-color: #ffecd2;
  color: #f86d75;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

.publish-time {
  color: #999;
  font-size: 0.9rem;
}

.question-content {
  color: #666;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.question-stats {
  display: flex;
  gap: 1.5rem;
  color: #999;
  font-size: 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.advice-section h2,
.related-section h2 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1.5rem;
}

.advice-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.advice-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.advice-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.advice-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.advice-link:hover .advice-card {
  background-color: #fff9f8;
}

.advisor-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
}

.advisor-details h3 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.2rem;
  transition: color 0.3s ease;
}

.advice-link:hover .advisor-details h3 {
  color: #ff9a9e;
}

.advisor-title {
  color: #999;
  font-size: 0.9rem;
}

.advice-rating {
  margin-left: auto;
}

.rating {
  background-color: #ffecd2;
  color: #f86d75;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

.advice-content p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.advice-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.view-details {
  color: #ff9a9e;
  font-weight: 500;
  margin-top: auto;
  padding-top: 1rem;
  text-align: right;
  display: inline-block;
  align-self: flex-end;
  transition: transform 0.3s ease;
}

.advice-link:hover .view-details {
  transform: translateX(5px);
}

.related-questions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.related-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.related-link {
  text-decoration: none;
  color: inherit;
}

.related-link h3 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.related-link p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.related-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #999;
}

@media (max-width: 768px) {
  .advice-container {
    padding: 1rem;
  }
  
  .question-section {
    padding: 1.5rem;
  }
  
  .question-header h1 {
    font-size: 1.5rem;
  }
  
  .advisor-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .advice-rating {
    margin-left: 0;
  }
  
  .advice-actions {
    flex-wrap: wrap;
  }
  
  .related-questions {
    grid-template-columns: 1fr;
  }
}
</style>